<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生成图形二维码 </title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
	body {
			width: 100%;
			padding: 0;
			background-color: #FFFFF6;
		}
		h1, h2 {
			text-align: center;
		}

		input[type=text] {
			display: block;
			width: 380px;
			height: 30px;
			margin: 0 auto;
			font-size: 14pt;
		}
		input[type=file] {
			display: block;
			width: 380px;
			height: 30px;
			margin: 0 auto;
		}
		label {
			display: block;
			width: 380px;
			height: 30px;
			margin: 0 auto;
		}

		.group {
			width: 400px;
			height: 195px;
			margin: 0 auto;
		}
		.clear {
			clear: both;
		}
		#qr {
			float: left;
			width: 195px;
			height: 195px;
			margin: 0 auto;
			margin-right: 10px;
		}
		#image {
			float: left;
			width: 195px;
			height: 195px;
			margin: 0 auto;
			margin-top: 12px;
		}

		#combine {
			width: 195px;
			height: 195px;
			margin: 0 auto;
		}
</style>

</head>
<body>

<h2></h2>
    <p align="center">输入网址在文本框中：</p>
	<input id="value" type="text" value="https://github.com/LJolon/Html5Demo-by-JQuery">
	<p align="center">添加想要叠加的图片：</p>
    <input id="file" type="file">
	<label>
		黑白: <input type="radio" value="threshold" name="filter" checked>
		全彩	: <input type="radio" value="color" name="filter">
	</label>

	<div class="group">
 
		<div id="qr"></div> 
 
		<div id="image"><img src="img/touxiang.jpg" width="171"></div>
		<div class="clear"></div>
	</div>
	<h2>生成</h2>
	<div id="combine"></div>

<script src="js/qrcode.js"></script>
<script src="js/qart.min.js"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function() {
			var value = 'https://github.com/LJolon/Html5Demo-by-JQuery';
			var filter = 'threshold';
			var imagePath = 'img/touxiang.jpg';

			var self = this;

			function makeQR() {
				var qr = qrcode.QRCode(10, 'H');
				qr.addData(value);
				qr.make();
				document.getElementById('qr').innerHTML = qr.createImgTag(3);
			}

			function makeQArt() {
				new QArt({
					value: value,
					imagePath: imagePath,
					filter: filter
				}).make(document.getElementById('combine'));
			}

			function getBase64(file, callback) {
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function () {
					callback(reader.result);
				};
			}

			$('#value').keyup(function() {
				value = $(this).val();
				makeQR();
				makeQArt();
			});

			$('#file').change(function() {
				getBase64(this.files[0], function(base64Img) {
					var regex = /data:(.*);base64,(.*)/gm;
					var parts = regex.exec(base64Img);
					imagePath = parts[0];
					$('#image img').attr('src', imagePath);
					makeQArt();
				});
			});

			$('input[type=radio]').click(function() {
				filter = $(this).val();
				makeQArt();
			});

			makeQR();
			makeQArt();
		});
</script>
</body>
</html>